<div data-dojo-attach-point="containerNode">
  <div class="${css.symbolPreviewContainer}" data-dojo-attach-point="dap_symbolPreviewContainer">
    <div class="${css.symbolPreview}" data-dojo-attach-point="dap_symbolPreview"></div>
  </div>
  <div data-dojo-type="dijit/layout/StackController" class="${css.tabBar}" data-dojo-props="containerId:'${id}_stackContainer'" data-dojo-attach-point="dap_stackController"></div>
  <div data-dojo-type="dijit/layout/StackContainer" id="${id}_stackContainer" data-dojo-attach-point="dap_stackContainer" data-dojo-props="doLayout: false" class="${css.content}">
    <div data-dojo-type="dijit/layout/ContentPane" title="${labels.shape}" data-dojo-attach-point="dap_shapeContainer">
      <div data-dojo-attach-point="dap_symbolPicker"></div>
      <div data-dojo-attach-point="dap_useImageContent">
        <div class="${css.link}" data-dojo-attach-point="dap_addImage" tabindex="0">${labels.useImage}</div>
        <div data-dojo-attach-point="dap_shapeImageUrlContainer" class="${css.shapeImageUrlContainer}">
          <div data-dojo-type="dijit/form/TextBox" data-dojo-attach-point="dap_shapeImageUrlInput" class="${css.urlInput} dijitInline"></div>
          <div data-dojo-attach-point="dap_loadShapeImageUrl" class="dijitInline ${css.addIcon}" tabindex="0"></div>
          <div data-dojo-attach-point="dap_shapeImageUrlErrorDisplay" class="${css.errorDisplay}"></div>
        </div>
      </div>
      <div data-dojo-attach-point="dap_shapeSizeControls">
        <div data-dojo-attach-point="dap_shapeSizeLabel" class="${css.label}">${labels.symbolSize}</div>
        <div class="${css.inlineInputContainer}">
          <div class="${css.symbolSizeInput} ${css.inlineInput}" data-dojo-attach-point="dap_symbolSizeOptions">
            <div data-dojo-type="esri/widgets/HorizontalSlider" data-dojo-attach-point="dap_shapeSizeSlider"></div>
            <div data-dojo-type="dijit/form/NumberSpinner"  data-dojo-attach-point="dap_shapeSizeTextBox"></div>
            <span class="${css.text}" data-dojo-attach-point="dap_sizeUnitLabel"></span>
          </div>
        </div>
      </div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="${labels.fill}" data-dojo-attach-point="dap_fillContainer">
      <div data-dojo-type="esri/widgets/ColorPicker" data-dojo-attach-point="dap_fillColorPicker" data-dojo-props="showSuggestedColors: true"></div>
      <div data-dojo-type="esri/widgets/SymbolStyler/ColorRampPicker" data-dojo-attach-point="dap_fillColorRampPicker" class="${css.hidden}"></div>
    </div>
    <div data-dojo-type="dijit/layout/ContentPane" title="${labels.outline}" data-dojo-attach-point="dap_outlineContainer">
      <div data-dojo-type="esri/widgets/ColorPicker" data-dojo-attach-point="dap_outlineColorPicker" data-dojo-props="showSuggestedColors: true"></div>
      <div data-dojo-type="esri/widgets/SymbolStyler/ColorRampPicker" data-dojo-attach-point="dap_outlineColorRampPicker" class="${css.hidden}"></div>
      <div data-dojo-attach-point="dap_lineWidthLabel" class="${css.label}">${labels.lineWidth}</div>
      <div class="${css.inlineInputContainer}">
        <div class="${css.lineWidthInput} ${css.inlineInput}" data-dojo-attach-point="dap_lineWidthOptions">
          <div data-dojo-type="esri/widgets/HorizontalSlider" data-dojo-attach-point="dap_lineWidthSlider"></div>
          <select data-dojo-attach-point="dap_lineWidthTextBox"><!--values added dynamically--></select>
          <span class="${css.text}" data-dojo-attach-point="dap_lineWidthUnitLabel"></span>
        </div>
      </div>
      <div class="${css.label}" data-dojo-attach-point="dap_linePatternSelectLabel">${labels.pattern}</div>
      <div data-dojo-attach-point="dap_linePatternSelect"></div>
    </div>
  </div>
</div>
